@charset "utf-8";

@import "common/common";
@import "common/reset";

.web{
    height: 92%;
    overflow: scroll;
    header{
        p{
            text-align: center;
            font-size: r(26px);
        }
        .top_fenlei{
            margin-top: r(30px);
            margin-left: r(23px);
            margin-right: r(21px);
            height: r(57px);
            line-height: r(57px);
            a{
                float: left;
                font-size: r(26px);
                text-align: center;
                line-height: r(57px);
                height: r(57px);
                width: r(123px);
                display: inline-block;  
                border-radius: 10px;
                border: 1px solid $color;
                color: #000000;
            }
            .city{
                margin: 0;
            }
        }
    }
    main{
        padding:0 r(22px);
        .fenlei_img{
            display: flex;
            .meishi{
                flex: 1;
                div{
                    margin: auto; 
                    height: r(149px);
                    width: r(149px);
                    img{
                        border-radius: 50%;
                        width: 100%;
                    }                   
                }
                p{
                    text-align: center;
                    font-size: r(26px);
                    margin-top: r(10px);
                }
            }
        }
        .shengluehao{
            width: 100%;
            margin-top: r(16px);
            text-align: center;
            span{
                width: r(18px);
                height: r(18px);
                display: inline-block;
                background: #ffc9a1;
                border-radius: 50%;
                margin-right:r(14px); 
                &:first-child{
                    background: #ff9344;
                }
            }
        }
        .meishilei{
            margin-top: r(20px);
            margin-bottom: r(50px);
            height: r(214px); 
            .meishilei_top{
                .meishilei_top_img{
                    width: r(56px);
                    height: r(44px);                  
                    display: inline-block;
                    img{
                        width: 100%;
                    }
                }
                p{
                    vertical-align: top;
                    width:r(570px);
                    font-size: r(30px);
                    display: inline-block;
                    span{
                        margin: r(10px);
                        float: right;
                        font-size: r(24px);
                        img{
                            margin-left: r(10px);
                            height: r(25px);
                            width: r(25px);
                        }
                    }
                }
            }
            .meishilei_list{
                margin-top:r(30px);
                display: flex;
                div{
                    flex: 1;
                    background: #000000;
                    margin-right: r(5px);
                    height: r(133px);
                    width: r(133px);
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }
            }          
        }
    }
    footer{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0px;
        padding-top: 5.5px;
        background-color: white;
        &::after{
            content: '';
            width: 100%;
            border-top: 1px solid rgba(7,17,27,.1);
            position: absolute;
            top: 0;
            transform: scaleY(.5);
        }
        ul{
            display: flex;
            width: 100%;
            li{ 
                flex:1;
                text-align: center;
                a{
                    display:block;
                    div{
                        font-size: r(26px);
                    }     
                    color: $color;      
                    i{
                        font-size: r(70px);
                    }                
                }
            }
        }
    }
}
